<template>
  <div class="excellence-container m-auto pb-10">
    <div class="flex justify-center items-center pt-8 mb-4">
      <h3 class="text-2xl font-medium">{{ $t("ticketSales.Excellence") }}</h3>
    </div>
    <div class="flex justify-start items-start content">
      <img
        src="@/assets/images/TicketSales/15.png"
        alt=""
        style="min-height: 360px"
      />
      <div class="ml-10 data">
        <h3 class="font-semibold text-base mb-2">
          {{ $t("ticketSales.channels") }}
        </h3>
        <h4 class="font-medium text-sm mb-2">
          {{ $t("ticketSales.channelsTitle1") }}
        </h4>
        <p>
          {{ $t("ticketSales.channelsTip1") }}
        </p>
        <h4 class="font-medium text-sm mb-2">
          {{ $t("ticketSales.channelsTitle2") }}
        </h4>
        <p>{{ $t("ticketSales.channelsTip2") }}</p>
        <h4 class="font-medium text-sm mb-2">
          {{ $t("ticketSales.channelsTitle3") }}
        </h4>
        <p>{{ $t("ticketSales.channelsTip3") }}</p>
      </div>
    </div>
    <div class="flex justify-start items-start content">
      <div class="mr-10 pr-10 data">
        <h3 class="font-semibold text-base mb-2">
          {{ $t("ticketSales.digitalServices") }}
        </h3>
        <h4 class="font-medium text-sm mb-2">
          {{ $t("ticketSales.digitalServicesTitle1") }}
        </h4>
        <p>{{ $t("ticketSales.digitalServicesTip1") }}</p>
        <h4 class="font-medium text-sm mb-2">
          {{ $t("ticketSales.digitalServicesTitle2") }}
        </h4>
        <p>{{ $t("ticketSales.digitalServicesTip2") }}</p>
        <h4 class="font-medium text-sm mb-2">
          {{ $t("ticketSales.digitalServicesTitle3") }}
        </h4>
        <p>{{ $t("ticketSales.digitalServicesTip3") }}</p>
      </div>
      <img
        src="@/assets/images/TicketSales/16.png"
        alt=""
        style="min-height: 360px"
      />
    </div>
    <div class="flex justify-start items-start content">
      <img
        src="@/assets/images/TicketSales/17.png"
        alt=""
        style="min-height: 360px"
      />
      <div class="ml-10 data">
        <h3 class="font-semibold text-base mb-2">
          {{ $t("ticketSales.exemplaryServices") }}
        </h3>
        <h4 class="font-medium text-sm mb-2">
          {{ $t("ticketSales.exemplaryServicesTitle1") }}
        </h4>
        <p>{{ $t("ticketSales.exemplaryServicesTips1") }}</p>
        <h4 class="font-medium text-sm mb-2">
          {{ $t("ticketSales.exemplaryServicesTitle2") }}
        </h4>
        <p>{{ $t("ticketSales.exemplaryServicesTips2") }}</p>
        <h4 class="font-medium text-sm mb-2">
          {{ $t("ticketSales.exemplaryServicesTitle3") }}
        </h4>
        <p>{{ $t("ticketSales.exemplaryServicesTips3") }}</p>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.excellence-container {
  width: 80%;
  min-height: 650px;
  .content {
    width: 100%;
    padding: 2% 4%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 50%;
      height: 300px;
    }
    .data {
      width: 50%;
      p {
        color: #393b3f;
        font-size: 14px;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
